<template>
  <el-container style="height: 100%" id="app">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['/']" :router="true">
        <template v-for="(item, index) in $router.options.routes">
          <el-submenu :index="item.path" v-if="item.children" :key="item.path">
            <template slot="title"
              ><i :class="item.icon || 'el-icon-setting'"></i>{{ item.name }}</template
            >
            <el-menu-item-group>
              <!-- :title="item.name" -->
              <!-- <template slot="title">{{ item.name || "分组" + index }}</template> -->
              <el-menu-item
                :index="item.path + '/' + subItem.path"
                v-for="subItem in item.children"
                :key="item.path + subItem.path"
              >
                <span slot="title">{{ subItem.name || subItem.path }}</span>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <!-- <router-link :to="item.path + '/' + subItem.path">{{
                  subItem.name || subItem.path
                }}</router-link> -->
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-else :index="item.path" :key="item.path + index">
            <i :class="item.icon || 'el-icon-menu'"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>唐泉</span>
        <el-avatar size="small" :src="circleUrl"></el-avatar>
      </el-header>

      <el-main>
        <!-- 过渡动画：https://cn.vuejs.org/v2/guide/transitions.html -->
        <transition name="slide-fade">
          <!-- keep-alive:缓存组件，而不是销毁它 -->
          <keep-alive>
            <!-- 路由出口:路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
          </keep-alive>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      circleUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  created() {
    console.log("路由", this.$router);
    console.log("数据仓库", this.$store.state);
  },
};
</script>

<style>
html,
body,
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
